function ProductView() {
	var data = "{}";
	
	this.loadProductData = function(contennerId,productId) {
		var xmlhttp;
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera,
									// Safari
			xmlhttp = new XMLHttpRequest();
		} else {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.open("GET", "/rest/resources/product/"+productId);
		xmlhttp.send();

		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4) {
				if(xmlhttp.status == 200){
					data = eval('(' + xmlhttp.responseText + ')');
					display(contennerId);
					$('#images_selected').addimagezoom({magnifiersize : [ 300, 300 ]});					
					ProductView.addEditableParam();//add class 'editable' & attr 'editAction'
					ClientAction.overEditableComponentListener();
				}else{
					window.location.href='/';
				}
				
			}
		};
	};

	
	var display = function(contennerId) {
		var contenner = document.getElementById(contennerId);
		contenner.appendChild(slide());
		contenner.appendChild(detail());
	};
	var slide = function() {
		var article = document.createElement('article');
		article.setAttribute('class', 'images_slide');
		article.appendChild(slideBody());
		article.appendChild(slideFooter());
		return article;
	};
	var slideBody = function() {
		var isc = document.createElement('div');
		isc.setAttribute('class', 'images_selected_contenner');

		var is = document.createElement('img');
		is.setAttribute('class', 'images_selected');
		is.setAttribute('id', 'images_selected');
		is.setAttribute('src', data.imageURLs.split(',')[0]);
		isc.appendChild(is);
		return isc;
	};

	var slideFooter = function() {
		var footer = document.createElement('footer');
		var div = document.createElement('div');
		div.setAttribute('class', 'image_pagination');
		div.setAttribute('id', 'image_pagination');
		var img;
		var le = data.imageURLs.split(',').length;
		for ( var i = 0; i < le; i++) {
			img = document.createElement('img');
			img.setAttribute('src', data.imageURLs.split(',')[i]);
			img.setAttribute('onclick', 'slideFocus(this)');
			div.appendChild(img);
		}
		footer.appendChild(div);
		return footer;
	};

	var detail = function() {
		var article = document.createElement('article');
		article.setAttribute('class', 'detail');
		article.appendChild(detailHeader());
		article.appendChild(detailBody());
		article.appendChild(detailFooter());
		return article;
	};

	var detailHeader = function() {
		var header = document.createElement('header');
//		var title = document.createElement('span');
//		title.appendChild(document.createTextNode(data.name));
//		header.appendChild(title);
		
		header.appendChild(document.createTextNode(data.name));
		return header;
	};

	var detailBody = function() {
		var description = document.createElement('div');
		description.setAttribute('class', 'description');
		description.innerHTML = data.description;
		return description;
	};

	var detailFooter = function() {
		var footer = document.createElement('footer');
		var titlePrice = document.createElement('div');
		var price = document.createElement('div');

		titlePrice.setAttribute('class', 'price_title');
		titlePrice.appendChild(document.createTextNode('Giá bán: '));

		price.appendChild(document.createTextNode(data.price));
		price.setAttribute('class', 'price');
		footer.appendChild(titlePrice);
		footer.appendChild(price);
		return footer;
	};
}

ProductView.addEditableParam = function(){
	var price = $('.product_view .detail footer .price');
	price.addClass('editable');
	price.attr('editAction','editProduct');
	price.attr('name','product_price');
	
	var description = $('.product_view .detail .description');
	description.addClass('editable');
	description.attr('editAction','editProduct');
	description.attr('name','product_description');
	
	var name = $('.product_view .detail header');
	name.addClass('editable');
	name.attr('editAction','editProduct');
	name.attr('name','product_name');
	
	var img = $('.product_view .images_slide footer .image_pagination img');
	img.addClass('editable');
	img.attr('editAction','editProduct');
	img.attr('name','image_urls');
}